<html>
<head>
    <title>A video filter demo.</title>
    <meta charset="UTF-8">
    <script src="wge/wgeCore.js" type="text/javascript"></script>
    <script src="wge/wgeAlgorithm.js" type="text/javascript"></script>
    <script src="wge/wgeWebGL.js" type="text/javascript"></script>
    <script src="wge/wgeFilterHandler.js" type="text/javascript"></script>
    <script src="wge/wgeFilterInterface.js" type="text/javascript"></script>
    <script src="wge/wgeFilterLookup.js" type="text/javascript"></script>
    <!--<script src="wge/wgeSprite2d.js" type="text/javascript"></script>-->
    <script src="wge/wgeGUI.js" type="text/javascript"></script>
</head>
<body onload="main()">

<div id="content" style="width: 800px;height: 600px"></div>
<div id="controlButtons">
    <input type="button" value="none" onclick="chooseLUTFilter(null)">
    <input type="button" value="BW" onclick="chooseLUTFilter(this)">
    <input type="button" value="edgy_amber" onclick="chooseLUTFilter(this)">
    <input type="button" value="filmstock" onclick="chooseLUTFilter(this)">
    <input type="button" value="foggy_night" onclick="chooseLUTFilter(this)">
    <input type="button" value="late_sunset" onclick="chooseLUTFilter(this)">
    <input type="button" value="soft_warming" onclick="chooseLUTFilter(this)">
    <input type="button" value="wildbird" onclick="chooseLUTFilter(this)">
</div>

<video id="demoVideo" muted autoplay loop playsinline src="test.mp4" style="display: none"></video>

<script>

    var MyGUI = WGE.Class(WGE.GUIInterface, {
        context: undefined,
        originFilter: undefined,
        filter: undefined,
        handler : undefined,
        videoTexture: undefined,
        lookupTextures: undefined,
        // sprite: undefined,
        // vertexBuffer : undefined,

        bindFather: function (fatherObj) {
            if (WGE.GUIInterface.bindFather.call(this, fatherObj)) ;
            {
                var gl = this.context = this.canvas.getContext('experimental-webgl');

                if (!gl) {
                    alert("Your browser does not support webgl!");
                } else {
                    // this.sprite = new WGE.Sprite2d(this.canvas, gl);

                    var tex = this.videoTexture = gl.createTexture();
                    gl.bindTexture(gl.TEXTURE_2D, tex);

                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, window.demoVideo.videoWidth, window.demoVideo.videoHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
                    // gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, window.demoVideo);

                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

                    // var t = new WGE.Texture2D(gl);
                    // t.initWithTexture(tex, demoVideo.videoWidth, demoVideo.videoHeight, true);
                    // this.sprite.initSprite(t);
                    // this.sprite.moveTo(this.canvas.width / 2, this.canvas.height / 2);

                    // this.vertexBuffer = WGE.genCommonQuadArrayBuffer(gl);

                    this.filter = new WGE.FilterLookup(gl);
                    // if(!this.filter.isValid()) {
                    //     console.log("Init filter failed!");
                    // }

                    //无任何效果, 显示原图.
                    this.originFilter = new WGE.FilterInterface(gl);

                    this.handler = new WGE.FilterHandler(gl);
                    // this.handler.addFilter(this.filter);

                    this.filter.setFlipScale(1, -1);
                    this.originFilter.setFlipScale(1, -1);
                }

                return !!this.context;
            }
            return false;
        },

        // update: function () {
        //
        // },

        render: function () {
            var gl = this.context;

            gl.clearColor(0, 0, 0, 0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.viewport(0, 0, this.canvas.width, this.canvas.height);

            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, this.videoTexture);
            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, window.demoVideo);

            if(this.filter.isValid()) {
                this.handler.renderFilter(this.filter, this.videoTexture, null);
            } else {
                this.handler.renderFilter(this.originFilter, this.videoTexture, null);
            }
        }
    });

    var mygui = null;
    var demoVideo = WGE.ID("demoVideo");

    demoVideo.onloadedmetadata = function () {
        var content = WGE.ID("content");
        content.style.width = demoVideo.videoWidth + "px";
        content.style.height = demoVideo.videoHeight + "px";
        // demoVideo.width = demoVideo.videoWidth;
        // demoVideo.height = demoVideo.videoHeight;

        mygui = new MyGUI(content);

        //下面两句都是使整个ui大小跟随父元素变化，推荐前者。嫌麻烦或者跟已有代码有冲突（比如body的onresize有别的代码会随时更改）写成后者也没关系。
        document.body.setAttribute("onresize", "mygui.onresize(event);"); //较好
        mygui.start();
        console.log("gui start!");
        demoVideo.play();
    };

    function main() {
        demoVideo.play();
    }

    function chooseLUTFilter(elem) {

        if(!elem) {
            mygui.filter.lookupTexture = null;
            return;
        }

        if(!mygui.lookupTextures) {
            mygui.lookupTextures = {};
        }

        var name = "data/" + elem.value + ".png";

        if(mygui[name]) {
            mygui.filter.lookupTexture = mygui[name];
        } else {
            WGE.loadImages([name], function (imgArr) {
                var tex = WGE.genTexture(mygui.context, imgArr[0]);
                mygui[name] = tex;
                mygui.filter.lookupTexture = mygui[name];
            });
        }
    }

</script>
</body>
</html>

